<template>
  <div class="f_div">
    <div class="t_div">基础资料 / <a href="#">客户管理</a></div>
    <el-container>
      <el-header class="header">
        <div class="h_div">
          <div class="h_in_vid">
            <el-button type="primary" style="width: 80px" @click="add"
              >新增</el-button
            >
          </div>
        </div>
      </el-header>
      <el-header class="header2">
        <div class="h_div">
          <div class="h_in_vid">
            <el-form
              ref="form"
              :inline="true"
              :model="searchForm"
              class="demo-form-inline"
            >
                <!-- <el-form-item label="客户级别">
                  <el-select
                    v-model="value1"
                    placeholder="请选择"
                    :teleported="false"
                    style="width: 180px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.dict_code"
                      :label="item.dict_label"
                      :value="item.dict_code"
                    />
                  </el-select>
                </el-form-item> -->
              <el-form-item label="创建日期：">
                <el-date-picker
                  v-model="value2"
                  type="datetimerange"
                  range-separator="To"
                  start-placeholder="请选择日期"
                  end-placeholder="请选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="搜索：">
                <el-input
                  v-model="value1"
                  placeholder="请输入关键字搜索"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="tjian">搜索</el-button>
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-header>
      <el-main class="main">
        <el-table
          height="442px"
          :data="tableData"
          style="width: 100%"
          row-key="ct_id"
          default-expand-all
          stripe
          :header-cell-style="{
            background: '#F7F7F7',
            color: '#999',
            textAlign: 'center',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            prop="create_time"
            label="创建时间"
            width="170px"
          ></el-table-column>
          <el-table-column
            prop="ct_numbering"
            label="客户编号"
            width="150px"
          ></el-table-column>
          <el-table-column
            prop="ct_cl_name"
            label="客户名称"
            width="120px"
          ></el-table-column>
          <el-table-column
            prop="ct_lndustry"
            label="所属行业"
            width="120px"
          ></el-table-column>
          <el-table-column property="ord_state" label="状态" width="120">
            <template #default="scope">
              <span>{{ formatOrderState(scope.row.ct_state) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="ct_name"
            label="联系人姓名"
            width="120px"
          ></el-table-column>
          <el-table-column
            prop="ct_phone"
            label="手机号码"
            width="120px"
          ></el-table-column>
          <el-table-column label="操作">
            <template #default="scoped">
              <el-button
                type="text"
                size="small"
                @click="edit(scoped.row.ct_id)"
                >编辑</el-button
              >
              <el-button link type="danger" @click="delBill(scoped.row.ct_id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            style="float: right; margin-top: 10px"
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :disabled="false"
            :background="false"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import $http from "@/axios/base.js";

export default {
  setup() {
    let tableData = ref([]);
    let value = ref("");
    let value1 = ref("");
    let value2 = ref("");
    let options = ref([]);
    let currentPage = ref(1);
    let pageSize = ref(10);
    let count = ref();

    let router = useRouter();

    function formatOrderState(status) {
      switch (status) {
        case 0:
          return "启用";
        case 1:
          return "停用";
      }
    }

    function showGender(value) {
      axios
        .get("http://localhost:5261/api/Sys_Dict_data/Get_Dict_Types", {
          params: {
            Dict_name: value,
          },
        })
        .then((res) => {
          if (value == "客户级别") options.value = res.data;
        })
        .catch((err) => console.log(err));
    }

    function add() {
      router.push({
        path: "/ClientCreate",
        query: { name: "新增客户信息", id: 0 },
      });
    }

    function show() {
      $http
        .get(
          `http://localhost:5261/api/Ct_/GetCustomer_ments/${currentPage.value},${pageSize.value}`
        )
        .then((res) => {
          tableData.value = res;
          console.log(tableData.value);
          tableData.value.forEach((item) => {
            item.create_time = new Date(item.create_time)
              .toISOString()
              .slice(0, 10)
              .toString();
          });
        })
        .catch((err) => console.log(err));
    }

    function tjian() {
      $http
        .get(
          `http://localhost:5261/api/Ct_/Customer_condition/${currentPage.value},${pageSize.value}?Create_time=${value2.value}&value2=${value1.value}`
        )
        .then((res) => {
          tableData.value = res;
          ClientCount();
        })
        .catch((err) => console.log(err));
    }

    function edit(id) {
      router.push({
        path: "/ClientCreate",
        query: { name: "编辑客户信息", id: id },
      });
    }

    function delBill(ct_id) {
      console.log(ct_id);
      $http
        .delete("http://localhost:5261/api/Ct_/DelCt", {
          params: {
            id: ct_id,
          },
        })
        .then((res) => {
          if (res) {
            show();
            ElMessage.success("删除成功！！！");
          } else {
            ElMessage.error("异常错误！");
          }
        })
        .catch((err) => console.log(err));
    }

    onMounted(() => {
      show(), showGender("客户级别"), formatOrderState();
    });

    function ClientCount() {
      $http
        .get(
          `http://localhost:5261/api/Ct_/Count?Create_time=${value2.value}&value2=${value1.value}`
        )
        .then((res) => {
          count.value = res;
          console.log(count.value);
        })
        .catch((err) => {
          console.log("错误：" + err);
        });
    }
    ClientCount();

    const searchForm = reactive({
      level: "1",
      dateRange: "",
      keyword: "",
    });

    function handleReset() {
      // 重置表单
      searchForm.level = "";
      searchForm.dateRange = "";
      searchForm.keyword = "";
      // 重置表格数据
      // ...
    }

    function handleCurrentChange(val) {
      currentPage.value = val;
      show();
    }

    function handleSizeChange(val) {
      pageSize.value = val;
      show();
    }

    return {
      value,
      value1,
      value2,
      tableData,
      searchForm,
      currentPage,
      pageSize,
      handleReset,
      handleCurrentChange,
      handleSizeChange,
      delBill,
      show,
      tjian,
      edit,
      add,
      count,
      formatOrderState,
      options,
      showGender,
    };
  },
};
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}

.t_div {
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  color: #b3b4b6;
}

a {
  text-decoration: none;
}

.f_div {
  padding: 0px 50px;
}

.h_div {
  height: 39px;
}

.h_in_vid {
  width: 1400px;
  height: 20px;
  margin-top: 20px;
  display: flex;
}

.header {
  background-color: #ffffff;
  border-radius: 10px 10px 0px 0px;
}

.header2 {
  background-color: #ffffff;
}

.main {
  background-color: #ffffff;
  border-radius: 0px 0px 10px 10px;
  height: 650px;
}
</style>